<template>
	<view>
		<block v-for="(weeks, week) in canlender.weeks" :key="week">
			<view class="uni-calender__body-date-week">
				<block v-for="(day, index) in weeks" :key="index">
					<view :class="{
              'uni-calender__disable': canlender.month !== day.month || day.disable,
              'uni-calender__date-current':
                (isDay(day.date) || day.checked) &&
                zcDates.month === day.month &&
                !day.disable,
              'uni-calender__lunar': lunar,
              'uni-calender__is-day': day.isDay
            }" class="uni-calender__date" @tap="selectDays(
			 		week,
			 		index,
			 		canlender.month === day.month,
					zcDates,
			 		day.disable,
			 		canlender.lunar
			 	  )">
			<!-- 
			需要日历可点击，将下面代码复制放在上面标签里面
			 @tap="selectDays(
			 		week,
			 		index,
			 		canlender.month === day.month,
			 		day.disable,
			 		canlender.lunar
			 	  )"
			 -->
				
			
						<view class="uni-calender__circle-box" :class="{'uni-calender__active': day.clockinfo.have,}" :style="((parseInt(zcDates.year) === canlender.year) && (parseInt(zcDates.month) === day.month) && isDay(day.date) && day.isShowTask && taskIdx(day.date).isOverdue)?'background-color:#FF7373':((parseInt(zcDates.year) === canlender.year) && (parseInt(zcDates.month) === day.month) && isDay(day.date) && day.isShowTask && !taskIdx(day.date).isOverdue)?'background-color:#6edab8':''">
							{{ day.date }}
							<view v-if="lunar" class="uni-calender__lunar">{{ day.lunar }}</view>
							<!-- <view v-if="day.have" class="uni-calender__data-circle" ></view> -->
						</view>
						
						<!-- <view v-if="">
							<view v-if="taskIdx(day.date).isOverdue" style="color: #999999;font-size:20upx;background-color: red;">{{taskIdx(day.date).tast}}</view>
							<view v-else style="color: #3ca4fa;font-size:20upx;background-color: #00BAAD;">{{taskIdx(day.date).tast}} 待跟进</view>
						</view> -->
						
					</view>
				</block>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: 'UniCalendarItem',
		computed:{
			isDay(day){
				return function (day) {
					let isExist = false;
					for (var i = 0; i < this.zcDates.data.length; i++) {
						if (this.zcDates.data[i].day === day) {
							isExist = true;
						}
					}
					return isExist;
				}
			},
			taskIdx(day){
				return function (day) {
					let isExist;
					for (var i = 0; i < this.zcDates.data.length; i++) {
						if (this.zcDates.data[i].day === day) {
							isExist = {
								isOverdue:this.zcDates.data[i].isOverdue,
								tast:this.zcDates.data[i].tast
							}
						}
					}
					return isExist;
				}
			}
		},
		props: {
			/**
			 * 当前日期
			 */
			canlender: {
				type: null,
				default: () => {
					return {}
				}
			},
			lunar: {
				type: Boolean,
				default: false
			},
			zcDates:Object
		},
		data() {
			return {
				num:'',
				date:[],
				month:[]
			}
		},
		created() {
			let _this = this;
			// for (let i = 0; i < _this.zcDates.length; i++) {
			// 	_this.date.push(_this.zcDates[i].split('-')[2]);
			// 	
			// 	if (_this.month.indexOf(parseInt(_this.zcDates[i].split('-')[1])) === (-1)) {
			// 		_this.month.push(parseInt(_this.zcDates[i].split('-')[1]));
			// 	}
			// }
			// 
			// console.log(_this.zcDates.data['day'].indexOf('8'));
		},
		methods: {
			selectDays(week, index, ischeck, isOverdue, isDay, lunar) {
				this.$emit('selectDays', {
					week,
					index,
					ischeck,
					isOverdue,
					isDay,
					lunar
				})
				
				this.num = index;
			}
		}
	}
</script>

<style>
	@charset "UTF-8";

	.uni-calender__body-date-week {
		display: flex;
		width: 100%;
		/* border-bottom: 1px #f5f5f5 solid */
	}

	.uni-calender__body-date-week:last-child {
		border: none
	}

	.uni-calender__body-date-week .uni-calender__date {
		position: relative;
		width: 100%;
		text-align: center;
		display: flex;
		/* justify-content: center;
		align-items: center; */
		color: #000;
		background: #fff;
		box-sizing: border-box;
		/* padding-top: 20upx; */
		line-height: 1;
		height: 70upx;
	}
	.uni-calender__body-date-week .uni-calender__date {
		
		color: #FFFFFF;
		background: none;
	}

	.uni-calender__body-date-week .uni-calender__date .uni-calender__lunar {
		font-size: 20upx;
		color: #000;
		line-height: 1.2
	}

	.uni-calender__body-date-week .uni-calender__date .uni-calender__circle-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		flex-shrink: 0;
		border-radius: 50%;
		transition: all .2s;
		line-height: 1.2
	}

	.uni-calender__body-date-week .uni-calender__date.uni-calender__disable {
		color: #d4d4d4
	}

	.uni-calender__body-date-week .uni-calender__date.uni-calender__disable .uni-calender__lunar {
		color: #d4d4d4
	}

	.uni-calender__body-date-week .uni-calender__date.uni-calender__is-day {
		color: #fd2e32
	}

	.uni-calender__body-date-week .uni-calender__date.uni-calender__is-day .uni-calender__lunar {
		color: #fd2e32
	}

	.uni-calender__body-date-week .uni-calender__date.uni-calender__date-current {
		color: #fff;
		box-sizing: border-box
	}
	
	.uni-calender__body-date-week .uni-calender__date.uni-calender__date-current .uni-calender__circle-box {
		/* background: #fd2e32 */
		background: #3ca4fa
	}
	
	/* 日期标签信息 */
	.uni-calender__body-date-week .uni-calender__date {
		flex-direction: column;
		align-items: center;
	}
	.uni-calender__body-date-week .uni-calender__date.uni-calender__date-current {
		display: flex;
	}
	.uni-calender__body-date-week .uni-calender__date.uni-calender__date-current .uni-calender_text {
		
		font-size: 20upx;
		white-space: nowrap;
		position: relative;
		margin: 10upx 0;
	}

	.uni-calender__body-date-week .uni-calender__date.uni-calender__date-current .uni-calender__lunar {
		color: #fff
	}
	
	.uni-calender__body-date-week .uni-calender__date .uni-calender__data-circle {
		position: absolute;
		top: 10upx;
		right: 10upx;
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background: #ff5a5f;
		z-index: 2
	}
	
	.uni-calender__active{border: 3upx solid #FFFFFF !important;}
	
</style>